<template>
  <div class="add-disease-container">
    <el-card class="form-card">
      <!-- 标题 -->
      <div class="form-header">
        <h2>添加疾病</h2>
      </div>

      <!-- 表单区域 -->
      <el-form :model="form" label-width="80px" label-position="top">
        <!-- 科室选择 -->
        <el-form-item label="科室:">
          <el-cascader
              v-model="form.departmentPath"
              :options="departmentOptions"
              :props="{ expandTrigger: 'hover' }"
              clearable
              style="width: 100%"
          />
        </el-form-item>

        <!-- 已有疾病提示 -->
        <el-form-item>
          <div class="existing-diseases">
            <span class="label">该科室下已有疾病:</span>
            <span class="diseases">湿疹、白癜风、银屑病、荨麻疹、瘙痒症、痤疮、毛周角化症</span>
          </div>
        </el-form-item>

        <!-- 疾病名称 -->
        <el-form-item label="疾病:">
          <el-input
              v-model="form.name"
              placeholder="请输入疾病名称"
              clearable
          />
        </el-form-item>

        <!-- 疾病描述 -->
        <el-form-item label="描述(选填):">
          <el-input
              v-model="form.description"
              type="textarea"
              :rows="4"
              placeholder="描述疾病的症状，50字以内"
              maxlength="50"
              show-word-limit
          />
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <div class="form-actions">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {router} from "@/router/index.js";
import { ElMessage } from 'element-plus'
import axios from "axios";
import { useRoute } from 'vue-router'
const route = useRoute()


// 表单数据
const form = ref({})

// 科室选项（模拟数据）
const departmentOptions = ref([])
const getDepartmentOptions=()=>{
  axios.get('/disease/getDiseaseByDepartmentId').then(res=>{
    departmentOptions.value = res.data.obj.map(item=>({
      value: item.id || item.value || item,
      label:  item.name || item.label || item
    }))
  })
}

const diseaseId = ref(route.params.id || route.query.id)
const getDiseaseDetail = (diseaseId) => {
  if (!diseaseId.value) return // 新增情况不需要查询
  axios.get(`/disease/getDisease1/${diseaseId.value}`)
      .then(res => {
        // 正确处理返回数据，匹配图片中的表单结构
      form.value=res.data.obj
      })
      .catch(error => {
        ElMessage.error('获取疾病详情失败')
        console.error(error)
      })
}

onMounted(()=>{
  getDepartmentOptions();
  if (diseaseId.value) {
    getDiseaseDetail(route.params.id)
  }
})

// 提交表单
const handleSubmit =  () => {
//如果存在id则修改不存在则新增
  if(diseaseId.value){
    axios.put(`/disease/updateDisease/${diseaseId.value}`,form.value).then(res=>{
      ElMessage.success('修改成功')
      router.push('/disease')
    })
  }else{
    axios.post('/disease/addDisease',form.value).then(res=>{
      ElMessage.success('添加成功')
      router.push('/disease')
    })
  }
}


// 取消
const handleCancel = () => {
  router.push('/disease')
}
</script>

<style scoped>
.add-disease-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
}

.existing-diseases {
  background-color: #f8f8f8;
  padding: 12px 15px;
  border-radius: 4px;
  font-size: 14px;
}

.existing-diseases .label {
  color: #666;
  margin-right: 10px;
}

.existing-diseases .diseases {
  color: #333;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.el-form-item__label) {
  font-weight: bold;
  color: #333;
}
</style>